
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Drag &amp; Drop: Portal Style Example</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<!--there is no custom header content for this example-->

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Drag &amp; Drop: Portal Style Example</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Drag &amp; Drop: Portal Style Example</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This is a portal style example using Drag & Drop event bubbling and animation.</p>
	</div>

	<div class="module example-container  newWindow">
			<div id="example-canvas" class="bd">

		<p class="newWindowButton yui-skin-sam">
        <span id="newWindowLink">
            <span class="first-child">
                <a href="portal-drag_source.html" target="_blank">View example in new window.</a>
            </span>
        </span>
    </p>

	
		</div>
	</div>
	</div>

	<h3>Full HTML Source</h3>

<div id="syntax-8d240a344b86aa7313c22dba2f03c334" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">body</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;doc3&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui-t2&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;hd&quot;</span>&gt;&lt;<span class="kw2">h1</span>&gt;</span>YUI 3.0 Portal Example<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h1</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;bd&quot;</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;yui-main&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">	        <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui-b&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">                <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui-g&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">                    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;play&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">                        <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span></div></li><li class="li2"><div class="de2">                        <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span></div></li><li class="li1"><div class="de1">                        <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list3&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span></div></li><li class="li1"><div class="de1">                    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">	            <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">            <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li2"><div class="de2">	    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">	    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui-b&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">            <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;feeds&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">                <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>Drag a news feed into one of the columns.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">                <span class="sc2">&lt;<span class="kw2">ul</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span></div></li><li class="li2"><div class="de2">            <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;ft&quot;</span>&gt;</span>Built with <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/&quot;</span>&gt;</span>YUI 3.0<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>: <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/yui&quot;</span>&gt;</span>Core<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>, Loader, Get, <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/cookie&quot;</span>&gt;</span>Cookie<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>, <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/animation&quot;</span>&gt;</span>Animation<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>, <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/io&quot;</span>&gt;</span>IO<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>, <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/json&quot;</span>&gt;</span>JSON<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span> <span class="sc1">&amp;amp;</span> <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/dd&quot;</span>&gt;</span>DD<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li2"><div class="de2"><span class="sc2">&lt;<span class="kw2">script</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;assets/portal.js&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">script</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">body</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">body</span>&gt;</span>
<span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;doc3&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui-t2&quot;</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;hd&quot;</span>&gt;&lt;<span class="kw2">h1</span>&gt;</span>YUI 3.0 Portal Example<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h1</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;bd&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;yui-main&quot;</span>&gt;</span>
	        <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui-b&quot;</span>&gt;</span>
                <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui-g&quot;</span>&gt;</span>
                    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;play&quot;</span>&gt;</span>
                        <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span>
                        <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span>
                        <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list3&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span>
                    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
	            <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
            <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
	    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
	    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui-b&quot;</span>&gt;</span>
            <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;feeds&quot;</span>&gt;</span>
                <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>Drag a news feed into one of the columns.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
                <span class="sc2">&lt;<span class="kw2">ul</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span>
            <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;ft&quot;</span>&gt;</span>Built with <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/&quot;</span>&gt;</span>YUI 3.0<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>: <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/yui&quot;</span>&gt;</span>Core<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>, Loader, Get, <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/cookie&quot;</span>&gt;</span>Cookie<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>, <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/animation&quot;</span>&gt;</span>Animation<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>, <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/io&quot;</span>&gt;</span>IO<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>, <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/json&quot;</span>&gt;</span>JSON<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span> <span class="sc1">&amp;amp;</span> <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui/3/dd&quot;</span>&gt;</span>DD<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
<span class="sc2">&lt;<span class="kw2">script</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;assets/portal.js&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">script</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">body</span>&gt;</span></pre></div><textarea id="syntax-8d240a344b86aa7313c22dba2f03c334-plain"><body>
<div id="doc3" class="yui-t2">
    <div id="hd"><h1>YUI 3.0 Portal Example</h1></div>
    <div id="bd">
        <div id="yui-main">
	        <div class="yui-b">
                <div class="yui-g">
                    <div id="play">
                        <ul class="list" id="list1"></ul>
                        <ul class="list" id="list2"></ul>
                        <ul class="list" id="list3"></ul>
                    </div>
	            </div>
            </div>
	    </div>
	    <div class="yui-b">
            <div id="feeds">
                <p>Drag a news feed into one of the columns.</p>
                <ul></ul>
            </div>
        </div>
    </div>
    <div id="ft">Built with <a href="http://developer.yahoo.com/yui/3/">YUI 3.0</a>: <a href="http://developer.yahoo.com/yui/3/yui">Core</a>, Loader, Get, <a href="http://developer.yahoo.com/yui/3/cookie">Cookie</a>, <a href="http://developer.yahoo.com/yui/3/animation">Animation</a>, <a href="http://developer.yahoo.com/yui/3/io">IO</a>, <a href="http://developer.yahoo.com/yui/3/json">JSON</a> &amp; <a href="http://developer.yahoo.com/yui/3/dd">DD</a>.</div>
</div>
<script src="assets/portal.js"></script>
</body></textarea></div><h3>Full Javascript Source</h3>

<div id="syntax-e22fdfada23946f27257feb6e8254515" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Use loader to grab the modules needed</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span>yuiConfig<span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd'</span><span class="sy0">,</span> <span class="st0">'anim'</span><span class="sy0">,</span> <span class="st0">'io'</span><span class="sy0">,</span> <span class="st0">'cookie'</span><span class="sy0">,</span> <span class="st0">'json'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Make this an Event Target so we can bubble to it</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> Portal <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        Portal.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">&#40;</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    Portal.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">'portal'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">extend</span><span class="br0">&#40;</span>Portal<span class="sy0">,</span> Y.<span class="me1">Base</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//This is our new bubble target..</span></div></li><li class="li2"><div class="de2">    Y.<span class="me1">Portal</span> <span class="sy0">=</span> <span class="kw2">new</span> Portal<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Setup some private variables..</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span> lastY <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span> trans <span class="sy0">=</span> <span class="br0">&#123;</span><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//The list of feeds that we are going to use</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> feeds <span class="sy0">=</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="st0">'ynews'</span><span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            id<span class="sy0">:</span> <span class="st0">'ynews'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            title<span class="sy0">:</span> <span class="st0">'Yahoo! US News'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            url<span class="sy0">:</span> <span class="st0">'rss.news.yahoo.com/rss/us'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'yui'</span><span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            id<span class="sy0">:</span> <span class="st0">'yui'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            title<span class="sy0">:</span> <span class="st0">'YUI Blog'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            url<span class="sy0">:</span> <span class="st0">'feeds.yuiblog.com/YahooUserInterfaceBlog'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'slashdot'</span><span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            id<span class="sy0">:</span> <span class="st0">'slashdot'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            title<span class="sy0">:</span> <span class="st0">'Slashdot'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            url<span class="sy0">:</span> <span class="st0">'rss.slashdot.org/Slashdot/slashdot'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'ajaxian'</span><span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            id<span class="sy0">:</span> <span class="st0">'ajaxian'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            title<span class="sy0">:</span> <span class="st0">'Ajaxian'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            url<span class="sy0">:</span> <span class="st0">'feeds.feedburner.com/ajaxian'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'daringfireball'</span><span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            id<span class="sy0">:</span> <span class="st0">'daringfireball'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            title<span class="sy0">:</span> <span class="st0">'Daring Fireball'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            url<span class="sy0">:</span> <span class="st0">'daringfireball.net/index.xml'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'wiredtech'</span><span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            id<span class="sy0">:</span> <span class="st0">'wiredtech'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            title<span class="sy0">:</span> <span class="st0">'Wire: Tech Biz'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            url<span class="sy0">:</span> <span class="st0">'www.wired.com/rss/techbiz.xml'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'techcrunch'</span><span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            id<span class="sy0">:</span> <span class="st0">'techcrunch'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            title<span class="sy0">:</span> <span class="st0">'TechCrunch'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            url<span class="sy0">:</span> <span class="st0">'feedproxy.google.com/Techcrunch'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'smashing'</span><span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            id<span class="sy0">:</span> <span class="st0">'smashing'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            title<span class="sy0">:</span> <span class="st0">'Smashing Magazine'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            url<span class="sy0">:</span> <span class="st0">'www.smashingmagazine.com/wp-rss.php'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">//Setup the config for IO to use flash</span></div></li><li class="li1"><div class="de1">	Y.<span class="me1">io</span>.<span class="me1">transport</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">		id<span class="sy0">:</span> <span class="st0">'flash'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		yid<span class="sy0">:</span> Y.<span class="me1">id</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		src<span class="sy0">:</span> buildDir <span class="sy0">+</span> <span class="st0">'io/io.swf?stamp='</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="kw2">new</span> Date<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>.<span class="me1">getTime</span><span class="br0">&#40;</span><span class="br0">&#41;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Simple method for stopping event propagation</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Using this so we can detach it later</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> stopper <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        e.<span class="me1">stopPropagation</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Get the order, placement and minned state of the modules and save them to a cookie</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> _setCookies <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> dds <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>._drags<span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> list <span class="sy0">=</span> <span class="br0">&#123;</span><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Walk all the drag elements</span></div></li><li class="li1"><div class="de1">        Y.<span class="me1">each</span><span class="br0">&#40;</span>dds<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw2">var</span> par <span class="sy0">=</span> v.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">            <span class="co1">//Find all the lists with drag items in them</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span>par.<span class="me1">test</span><span class="br0">&#40;</span><span class="st0">'ul.list'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>list<span class="br0">&#91;</span>par.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span><span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    list<span class="br0">&#91;</span>par.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span><span class="br0">&#93;</span> <span class="sy0">=</span> <span class="br0">&#91;</span><span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Walk the list</span></div></li><li class="li1"><div class="de1">        Y.<span class="me1">each</span><span class="br0">&#40;</span>list<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="co1">//Get all the li's in the list</span></div></li><li class="li2"><div class="de2">            <span class="kw2">var</span> lis <span class="sy0">=</span> Y.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> k <span class="sy0">+</span> <span class="st0">' li.item'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            lis.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v2<span class="sy0">,</span> k2<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Get the drag instance for the list item</span></div></li><li class="li1"><div class="de1">                <span class="kw2">var</span> dd <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> v2.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Get the mod node</span></div></li><li class="li2"><div class="de2">                <span class="kw2">var</span> mod <span class="sy0">=</span> dd.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Is it minimized</span></div></li><li class="li1"><div class="de1">                <span class="kw2">var</span> min <span class="sy0">=</span> <span class="br0">&#40;</span>mod.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="sy0">?</span> <span class="kw2">true</span> <span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Setup the cookie data</span></div></li><li class="li1"><div class="de1">                list<span class="br0">&#91;</span>k<span class="br0">&#93;</span><span class="br0">&#91;</span>list<span class="br0">&#91;</span>k<span class="br0">&#93;</span>.<span class="me1">length</span><span class="br0">&#93;</span> <span class="sy0">=</span> <span class="br0">&#123;</span> id<span class="sy0">:</span> dd.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span>.<span class="me1">id</span><span class="sy0">,</span> min<span class="sy0">:</span> min <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">            <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//JSON encode the cookie data</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> cookie <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">stringify</span><span class="br0">&#40;</span>list<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Set the sub-cookie</span></div></li><li class="li2"><div class="de2">        Y.<span class="me1">Cookie</span>.<span class="me1">setSub</span><span class="br0">&#40;</span><span class="st0">'yui'</span><span class="sy0">,</span> <span class="st0">'portal'</span><span class="sy0">,</span> cookie<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Helper method for creating the feed DD on the left</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> _createFeedDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>node<span class="sy0">,</span> data<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="co1">//Create the DD instance</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            node<span class="sy0">:</span> node<span class="sy0">,</span></div></li><li class="li1"><div class="de1">            data<span class="sy0">:</span> data<span class="sy0">,</span></div></li><li class="li1"><div class="de1">            bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDProxy</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            borderStyle<span class="sy0">:</span> <span class="st0">'none'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Setup some stopper events</span></div></li><li class="li2"><div class="de2">        dd.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> _handleStart<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        dd.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="sy0">,</span> stopper<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        dd.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> stopper<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">//Handle the node:click event</span></div></li><li class="li1"><div class="de1">    <span class="co2">/* {{{ */</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> _nodeClick <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Is the target an href?</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">target</span>.<span class="me1">test</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            <span class="kw2">var</span> a <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">,</span> anim <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">,</span> div <span class="sy0">=</span> a.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="co1">//Did they click on the min button</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span>a.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'min'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Get some node references</span></div></li><li class="li1"><div class="de1">                <span class="kw2">var</span> ul <span class="sy0">=</span> div.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'ul'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">                    h2 <span class="sy0">=</span> div.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'h2'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                h <span class="sy0">=</span> h2.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'offsetHeight'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                hUL <span class="sy0">=</span> ul.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'offsetHeight'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                inner <span class="sy0">=</span> div.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.inner'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">                <span class="co1">//Create an anim instance on this node.</span></div></li><li class="li1"><div class="de1">                anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    node<span class="sy0">:</span> inner</div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Is it expanded?</span></div></li><li class="li2"><div class="de2">                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>div.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Set the vars for collapsing it</span></div></li><li class="li1"><div class="de1">                    anim.<span class="me1">setAttrs</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        to<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                            height<span class="sy0">:</span> <span class="nu0">0</span></div></li><li class="li2"><div class="de2">                        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        iteration<span class="sy0">:</span> <span class="nu0">1</span></div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                    <span class="co1">//On the end, toggle the minned class</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Then set the cookies for state</span></div></li><li class="li1"><div class="de1">                    anim.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        div.<span class="me1">toggleClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                        _setCookies<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Set the vars for expanding it</span></div></li><li class="li1"><div class="de1">                    anim.<span class="me1">setAttrs</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        to<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                            height<span class="sy0">:</span> <span class="br0">&#40;</span>hUL<span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">                        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        iteration<span class="sy0">:</span> <span class="nu0">1</span></div></li><li class="li2"><div class="de2">                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Toggle the minned class</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Then set the cookies for state</span></div></li><li class="li1"><div class="de1">                    div.<span class="me1">toggleClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    _setCookies<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Run the animation</span></div></li><li class="li1"><div class="de1">                anim.<span class="me1">run</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">            <span class="co1">//Was close clicked?</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span>a.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'close'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Get some Node references..</span></div></li><li class="li1"><div class="de1">                <span class="kw2">var</span> li <span class="sy0">=</span> div.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    id <span class="sy0">=</span> li.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">                    dd <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> id<span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    data <span class="sy0">=</span> dd.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    <span class="kw1">item</span> <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> data.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">                <span class="co1">//Destroy the DD instance.</span></div></li><li class="li2"><div class="de2">                dd.<span class="me1">destroy</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Setup the animation for making it disappear</span></div></li><li class="li1"><div class="de1">                anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    node<span class="sy0">:</span> div<span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    to<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                        opacity<span class="sy0">:</span> <span class="nu0">0</span></div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                anim.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//On end of the first anim, setup another to make it collapse</span></div></li><li class="li1"><div class="de1">                    <span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        node<span class="sy0">:</span> div<span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        to<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                            height<span class="sy0">:</span> <span class="nu0">0</span></div></li><li class="li1"><div class="de1">                        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span></div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                    anim.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        <span class="co1">//Remove it from the document</span></div></li><li class="li1"><div class="de1">                        li.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">removeChild</span><span class="br0">&#40;</span>li<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                        <span class="kw1">item</span>.<span class="me1">removeClass</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                        <span class="co1">//Setup a drag instance on the feed list</span></div></li><li class="li2"><div class="de2">                        _createFeedDD<span class="br0">&#40;</span><span class="kw1">item</span><span class="sy0">,</span> data<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                        _setCookies<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Run the animation</span></div></li><li class="li2"><div class="de2">                    anim.<span class="me1">run</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Run the animation</span></div></li><li class="li1"><div class="de1">                anim.<span class="me1">run</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">            <span class="co1">//Stop the click</span></div></li><li class="li1"><div class="de1">            e.<span class="me1">halt</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="co2">/* }}} */</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//This creates the module, either from a drag event or from the cookie load</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> setupModDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>mod<span class="sy0">,</span> data<span class="sy0">,</span> dd<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> node <span class="sy0">=</span> mod<span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Listen for the click so we can react to the buttons</span></div></li><li class="li2"><div class="de2">        node.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'h2'</span><span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> _nodeClick<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">//Remove the event's on the original drag instance</span></div></li><li class="li1"><div class="de1">        dd.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        dd.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        dd.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">//It's a target</span></div></li><li class="li1"><div class="de1">        dd.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'target'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Setup the handles</span></div></li><li class="li2"><div class="de2">        dd.<span class="me1">addHandle</span><span class="br0">&#40;</span><span class="st0">'h2'</span><span class="br0">&#41;</span>.<span class="me1">addInvalid</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Remove the mouse listeners on this node</span></div></li><li class="li1"><div class="de1">        dd._unprep<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Update a new node</span></div></li><li class="li1"><div class="de1">        dd.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        <span class="co1">//Reset the mouse handlers</span></div></li><li class="li1"><div class="de1">        dd._prep<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">//The Yahoo! Pipes URL</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> url <span class="sy0">=</span> <span class="st0">'http:/'</span><span class="sy0">+</span><span class="st0">'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&amp;_render=json&amp;url=http:/'</span><span class="sy0">+</span><span class="st0">'/'</span> <span class="sy0">+</span> data.<span class="me1">url</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        <span class="co1">//Start the XDR request</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> id <span class="sy0">=</span> Y.<span class="me1">io</span><span class="br0">&#40;</span>url<span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            method<span class="sy0">:</span> <span class="st0">'GET'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            xdr<span class="sy0">:</span> <span class="br0">&#123;</span> </div></li><li class="li1"><div class="de1">			    <span class="kw2">use</span><span class="sy0">:</span><span class="st0">'flash'</span></div></li><li class="li2"><div class="de2">		    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            <span class="co1">//XDR Listeners</span></div></li><li class="li1"><div class="de1">		    on<span class="sy0">:</span> <span class="br0">&#123;</span> </div></li><li class="li1"><div class="de1">			    success<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>id<span class="sy0">,</span> data<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//On success get the feed data</span></div></li><li class="li2"><div class="de2">                    <span class="kw2">var</span> d <span class="sy0">=</span> feeds<span class="br0">&#91;</span>trans<span class="br0">&#91;</span>id<span class="br0">&#93;</span><span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Node reference</span></div></li><li class="li1"><div class="de1">                    inner <span class="sy0">=</span> d.<span class="me1">mod</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.inner'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Parse the JSON data</span></div></li><li class="li1"><div class="de1">                    oRSS <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">&#40;</span>data.<span class="me1">responseText</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">                    html <span class="sy0">=</span> <span class="st0">''</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">                    <span class="co1">//Did we get data?</span></div></li><li class="li1"><div class="de1">		            <span class="kw1">if</span> <span class="br0">&#40;</span>oRSS <span class="sy0">&amp;&amp;</span> oRSS.<span class="me1">count</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        <span class="co1">//Walk the list and create the news list</span></div></li><li class="li2"><div class="de2">			            Y.<span class="me1">each</span><span class="br0">&#40;</span>oRSS.<span class="me1">value</span>.<span class="me1">items</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                            <span class="kw1">if</span> <span class="br0">&#40;</span>k <span class="sy0">&lt;</span> <span class="nu0">5</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                                html <span class="sy0">+=</span> <span class="st0">'&lt;li&gt;&lt;a href=&quot;'</span> <span class="sy0">+</span> v.<span class="me1">link</span> <span class="sy0">+</span> <span class="st0">'&quot; target=&quot;_blank&quot;&gt;'</span> <span class="sy0">+</span> v.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'&lt;/a&gt;'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">		            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Set the innerHTML of the module</span></div></li><li class="li1"><div class="de1">                    inner.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'&lt;ul&gt;'</span> <span class="sy0">+</span> html <span class="sy0">+</span> <span class="st0">'&lt;/ul&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="kw1">if</span> <span class="br0">&#40;</span>Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        <span class="co1">//If we are still dragging, update the proxy element too..</span></div></li><li class="li2"><div class="de2">                        <span class="kw2">var</span> proxy_inner <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.inner'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                        proxy_inner.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'&lt;ul&gt;'</span> <span class="sy0">+</span> html <span class="sy0">+</span> <span class="st0">'&lt;/ul&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">			    failure<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>id<span class="sy0">,</span> data<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Something failed..</span></div></li><li class="li1"><div class="de1">                    <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">'Feed failed to load..'</span> <span class="sy0">+</span> id <span class="sy0">+</span> <span class="st0">' :: '</span> <span class="sy0">+</span> data<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">		    <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Keep track of the transaction</span></div></li><li class="li1"><div class="de1">        feeds<span class="br0">&#91;</span>data.<span class="me1">id</span><span class="br0">&#93;</span>.<span class="me1">trans</span> <span class="sy0">=</span> id<span class="sy0">;</span></div></li><li class="li1"><div class="de1">        feeds<span class="br0">&#91;</span>data.<span class="me1">id</span><span class="br0">&#93;</span>.<span class="me1">mod</span> <span class="sy0">=</span> mod<span class="sy0">;</span></div></li><li class="li1"><div class="de1">        trans<span class="br0">&#91;</span>id.<span class="me1">id</span><span class="br0">&#93;</span> <span class="sy0">=</span> data.<span class="me1">id</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Helper method to create the markup for the module..</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> createMod <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>feed<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> str <span class="sy0">=</span> <span class="st0">'&lt;li class=&quot;item&quot;&gt;'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                    <span class="st0">'&lt;div class=&quot;mod&quot;&gt;'</span> <span class="sy0">+</span> </div></li><li class="li1"><div class="de1">                        <span class="st0">'&lt;h2&gt;&lt;strong&gt;'</span> <span class="sy0">+</span> feed.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'&lt;/strong&gt; &lt;a title=&quot;minimize module&quot; class=&quot;min&quot; href=&quot;#&quot;&gt; &lt;/a&gt;'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                        <span class="st0">'&lt;a title=&quot;close module&quot; class=&quot;close&quot; href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/h2&gt;'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                        <span class="st0">'&lt;div class=&quot;inner&quot;&gt;'</span> <span class="sy0">+</span></div></li><li class="li2"><div class="de2">                        <span class="st0">'    &lt;div class=&quot;loading&quot;&gt;Feed loading, please wait..&lt;/div&gt;'</span> <span class="sy0">+</span> </div></li><li class="li1"><div class="de1">                        <span class="st0">'&lt;/div&gt;'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                    <span class="st0">'&lt;/div&gt;'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                <span class="st0">'&lt;/li&gt;'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">return</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">&#40;</span>str<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Handle the start Drag event on the left side</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> _handleStart <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Stop the event</span></div></li><li class="li2"><div class="de2">        stopper<span class="br0">&#40;</span>e<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Some private vars</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> drag <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            list3 <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#list1'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            mod <span class="sy0">=</span> createMod<span class="br0">&#40;</span>drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">//Add it to the first list</span></div></li><li class="li1"><div class="de1">        list3.<span class="me1">appendChild</span><span class="br0">&#40;</span>mod<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Set the item on the left column disabled.</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        <span class="co1">//Set the node on the instance</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Add some styles to the proxy node.</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            opacity<span class="sy0">:</span> <span class="st0">'.5'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            borderStyle<span class="sy0">:</span> <span class="st0">'none'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            width<span class="sy0">:</span> <span class="st0">'320px'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            height<span class="sy0">:</span> <span class="st0">'61px'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Update the innerHTML of the proxy with the innerHTML of the module</span></div></li><li class="li2"><div class="de2">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//set the inner module to hidden</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">'hidden'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//add a class for styling</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'moving'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        <span class="co1">//Setup the DD instance</span></div></li><li class="li1"><div class="de1">        setupModDD<span class="br0">&#40;</span>mod<span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="sy0">,</span> drag<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">//Remove the listener</span></div></li><li class="li1"><div class="de1">        <span class="kw1">this</span>.<span class="me1">detach</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> _handleStart<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Walk through the feeds list and create the list on the left</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> feedList <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#feeds ul'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">each</span><span class="br0">&#40;</span>feeds<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> li <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">&#40;</span><span class="st0">'&lt;li id=&quot;'</span> <span class="sy0">+</span> k <span class="sy0">+</span> <span class="st0">'&quot;&gt;'</span> <span class="sy0">+</span> v.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'&lt;/li&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        feedList.<span class="me1">appendChild</span><span class="br0">&#40;</span>li<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Create the DD instance for this item</span></div></li><li class="li1"><div class="de1">        _createFeedDD<span class="br0">&#40;</span>li<span class="sy0">,</span> v<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//This does the calculations for when and where to move a module</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> _moveMod <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>drag<span class="sy0">,</span> drop<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'item'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw2">var</span> dragNode <span class="sy0">=</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">                dropNode <span class="sy0">=</span> drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                append <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                padding <span class="sy0">=</span> <span class="nu0">30</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                xy <span class="sy0">=</span> drag.<span class="me1">mouseXY</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                region <span class="sy0">=</span> drop.<span class="me1">region</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">                middle1 <span class="sy0">=</span> region.<span class="me1">top</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>region.<span class="me1">bottom</span> <span class="sy0">-</span> region.<span class="me1">top</span><span class="br0">&#41;</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                middle2 <span class="sy0">=</span> region.<span class="me1">left</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>region.<span class="me1">right</span> <span class="sy0">-</span> region.<span class="me1">left</span><span class="br0">&#41;</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                dir <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                dir1 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                dir2 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">                <span class="co1">//We could do something a little more fancy here, but we won't ;)</span></div></li><li class="li1"><div class="de1">                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>xy<span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span> <span class="sy0">&lt;</span> <span class="br0">&#40;</span>region.<span class="me1">top</span> <span class="sy0">+</span> padding<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    dir1 <span class="sy0">=</span> <span class="st0">'top'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>region.<span class="me1">bottom</span> <span class="sy0">-</span> padding<span class="br0">&#41;</span> <span class="sy0">&lt;</span> xy<span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    dir1 <span class="sy0">=</span> <span class="st0">'bottom'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>region.<span class="me1">right</span> <span class="sy0">-</span> padding<span class="br0">&#41;</span> <span class="sy0">&lt;</span> xy<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    dir2 <span class="sy0">=</span> <span class="st0">'right'</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>xy<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span> <span class="sy0">&lt;</span> <span class="br0">&#40;</span>region.<span class="me1">left</span> <span class="sy0">+</span> padding<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    dir2 <span class="sy0">=</span> <span class="st0">'left'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                dir <span class="sy0">=</span> dir2<span class="sy0">;</span></div></li><li class="li2"><div class="de2">                <span class="kw1">if</span> <span class="br0">&#40;</span>dir2 <span class="sy0">===</span> <span class="kw2">false</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    dir <span class="sy0">=</span> dir1<span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                <span class="kw1">switch</span> <span class="br0">&#40;</span>dir<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    <span class="kw1">case</span> <span class="st0">'top'</span><span class="sy0">:</span></div></li><li class="li2"><div class="de2">                        <span class="kw2">var</span> next <span class="sy0">=</span> dropNode.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'nextSibling'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                        <span class="kw1">if</span> <span class="br0">&#40;</span>next<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                            dropNode <span class="sy0">=</span> next<span class="sy0">;</span></div></li><li class="li1"><div class="de1">                        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                            append <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                        <span class="kw1">break</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="kw1">case</span> <span class="st0">'bottom'</span><span class="sy0">:</span></div></li><li class="li1"><div class="de1">                        <span class="kw1">break</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="kw1">case</span> <span class="st0">'right'</span><span class="sy0">:</span></div></li><li class="li2"><div class="de2">                    <span class="kw1">case</span> <span class="st0">'left'</span><span class="sy0">:</span></div></li><li class="li1"><div class="de1">                        <span class="kw1">break</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>dropNode <span class="sy0">!==</span> <span class="kw2">null</span><span class="br0">&#41;</span> <span class="sy0">&amp;&amp;</span> dir<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                <span class="kw1">if</span> <span class="br0">&#40;</span>dropNode <span class="sy0">&amp;&amp;</span> dropNode.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>append<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        dropNode.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">insertBefore</span><span class="br0">&#40;</span>dragNode<span class="sy0">,</span> dropNode<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                        dropNode.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">appendChild</span><span class="br0">&#40;</span>dragNode<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">            <span class="co1">//Resync all the targets because something moved..</span></div></li><li class="li2"><div class="de2">            Y.<span class="me1">Lang</span>.<span class="me1">later</span><span class="br0">&#40;</span><span class="nu0">50</span><span class="sy0">,</span> Y<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">syncActiveShims</span><span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;   Handle the drop:enter event</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;   Now when we get a drop enter event, we check to see if the target is an LI, then we know it's out module.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;   Here is where we move the module around in the DOM.    </span></div></li><li class="li2"><div class="de2"><span class="coMULTI">&nbsp;   */</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drop:enter'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>e.<span class="me1">drag</span> <span class="sy0">||</span> <span class="sy0">!</span>e.<span class="me1">drop</span> <span class="sy0">||</span> <span class="br0">&#40;</span>e.<span class="me1">drop</span> <span class="sy0">!==</span> e.<span class="me1">target</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw1">return</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">        <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">===</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'item'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                _moveMod<span class="br0">&#40;</span>e.<span class="me1">drag</span><span class="sy0">,</span> e.<span class="me1">drop</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Handle the drag:drag event</span></div></li><li class="li1"><div class="de1">    <span class="co1">//On drag we need to know if they are moved up or down so we can place the module in the proper DOM location.</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drag'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> y <span class="sy0">=</span> e.<span class="me1">target</span>.<span class="me1">mouseXY</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>y <span class="sy0">&lt;</span> lastY<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            goingUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        lastY <span class="sy0">=</span> y<span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="coMULTI">/*</span></div></li><li class="li2"><div class="de2"><span class="coMULTI">&nbsp;   Handle the drop:hit event</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;   Now that we have a drop on the target, we check to see if the drop was not on a LI.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;   This means they dropped on the empty space of the UL.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;   */</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                drop.<span class="me1">appendChild</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">//Handle the drag:start event</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Use some CSS here to make our dragging better looking.</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>drag.<span class="me1">target</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            drag.<span class="me1">target</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'locked'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'opacity'</span><span class="sy0">,</span><span class="st0">'.5'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">'hidden'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'moving'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Handle the drag:end event</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Replace some of the styles we changed on start drag.</span></div></li><li class="li2"><div class="de2">    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>drag.<span class="me1">target</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            drag.<span class="me1">target</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'locked'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">removeClass</span><span class="br0">&#40;</span><span class="st0">'moving'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        _setCookies<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Handle going over a UL, for empty lists</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drop:over'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                drop.<span class="me1">appendChild</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                Y.<span class="me1">Lang</span>.<span class="me1">later</span><span class="br0">&#40;</span><span class="nu0">50</span><span class="sy0">,</span> Y<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">syncActiveShims</span><span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Create simple targets for the main lists..</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> uls <span class="sy0">=</span> Y.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul.list'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    uls.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> tar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drop</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            node<span class="sy0">:</span> v<span class="sy0">,</span></div></li><li class="li1"><div class="de1">            padding<span class="sy0">:</span> <span class="st0">'20 0'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'io:xdrReady'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="co1">//Get the cookie data</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> cookie <span class="sy0">=</span> Y.<span class="me1">Cookie</span>.<span class="me1">getSub</span><span class="br0">&#40;</span><span class="st0">'yui'</span><span class="sy0">,</span> <span class="st0">'portal'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>cookie<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="co1">//JSON parse the stored data</span></div></li><li class="li1"><div class="de1">            <span class="kw2">var</span> obj <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">&#40;</span>cookie<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">            <span class="co1">//Walk the data</span></div></li><li class="li1"><div class="de1">            Y.<span class="me1">each</span><span class="br0">&#40;</span>obj<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                <span class="co1">//Get the node for the list</span></div></li><li class="li1"><div class="de1">                <span class="kw2">var</span> list <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> k<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                <span class="co1">//Walk the items in this list</span></div></li><li class="li1"><div class="de1">                Y.<span class="me1">each</span><span class="br0">&#40;</span>v<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v2<span class="sy0">,</span> k2<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Get the drag for it</span></div></li><li class="li1"><div class="de1">                    <span class="kw2">var</span> drag <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> v2.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Create the module</span></div></li><li class="li2"><div class="de2">                    <span class="kw2">var</span> mod <span class="sy0">=</span> createMod<span class="br0">&#40;</span>drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="kw1">if</span> <span class="br0">&#40;</span>v2.<span class="me1">min</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        <span class="co1">//If it's minned add some CSS</span></div></li><li class="li1"><div class="de1">                        mod.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                        mod.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.inner'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'height'</span><span class="sy0">,</span> <span class="st0">'0px'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Add it to the list</span></div></li><li class="li1"><div class="de1">                    list.<span class="me1">appendChild</span><span class="br0">&#40;</span>mod<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Set the drag listeners</span></div></li><li class="li1"><div class="de1">                    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                    drag.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    drag.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="sy0">,</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>._proxy<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    drag.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    drag.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    drag.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">                    drag._unprep<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">//Setup the new Drag listeners</span></div></li><li class="li1"><div class="de1">                    setupModDD<span class="br0">&#40;</span>mod<span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="sy0">,</span> drag<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//Use loader to grab the modules needed</span>
YUI<span class="br0">&#40;</span>yuiConfig<span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd'</span><span class="sy0">,</span> <span class="st0">'anim'</span><span class="sy0">,</span> <span class="st0">'io'</span><span class="sy0">,</span> <span class="st0">'cookie'</span><span class="sy0">,</span> <span class="st0">'json'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">//Make this an Event Target so we can bubble to it</span>
    <span class="kw2">var</span> Portal <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        Portal.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">&#40;</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
    Portal.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">'portal'</span><span class="sy0">;</span>
    Y.<span class="me1">extend</span><span class="br0">&#40;</span>Portal<span class="sy0">,</span> Y.<span class="me1">Base</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="co1">//This is our new bubble target..</span>
    Y.<span class="me1">Portal</span> <span class="sy0">=</span> <span class="kw2">new</span> Portal<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
&nbsp;
    <span class="co1">//Setup some private variables..</span>
    <span class="kw2">var</span> goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span> lastY <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">,</span> trans <span class="sy0">=</span> <span class="br0">&#123;</span><span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//The list of feeds that we are going to use</span>
    <span class="kw2">var</span> feeds <span class="sy0">=</span> <span class="br0">&#123;</span>
        <span class="st0">'ynews'</span><span class="sy0">:</span> <span class="br0">&#123;</span>
            id<span class="sy0">:</span> <span class="st0">'ynews'</span><span class="sy0">,</span>
            title<span class="sy0">:</span> <span class="st0">'Yahoo! US News'</span><span class="sy0">,</span>
            url<span class="sy0">:</span> <span class="st0">'rss.news.yahoo.com/rss/us'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="st0">'yui'</span><span class="sy0">:</span> <span class="br0">&#123;</span>
            id<span class="sy0">:</span> <span class="st0">'yui'</span><span class="sy0">,</span>
            title<span class="sy0">:</span> <span class="st0">'YUI Blog'</span><span class="sy0">,</span>
            url<span class="sy0">:</span> <span class="st0">'feeds.yuiblog.com/YahooUserInterfaceBlog'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="st0">'slashdot'</span><span class="sy0">:</span> <span class="br0">&#123;</span>
            id<span class="sy0">:</span> <span class="st0">'slashdot'</span><span class="sy0">,</span>
            title<span class="sy0">:</span> <span class="st0">'Slashdot'</span><span class="sy0">,</span>
            url<span class="sy0">:</span> <span class="st0">'rss.slashdot.org/Slashdot/slashdot'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="st0">'ajaxian'</span><span class="sy0">:</span> <span class="br0">&#123;</span>
            id<span class="sy0">:</span> <span class="st0">'ajaxian'</span><span class="sy0">,</span>
            title<span class="sy0">:</span> <span class="st0">'Ajaxian'</span><span class="sy0">,</span>
            url<span class="sy0">:</span> <span class="st0">'feeds.feedburner.com/ajaxian'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="st0">'daringfireball'</span><span class="sy0">:</span> <span class="br0">&#123;</span>
            id<span class="sy0">:</span> <span class="st0">'daringfireball'</span><span class="sy0">,</span>
            title<span class="sy0">:</span> <span class="st0">'Daring Fireball'</span><span class="sy0">,</span>
            url<span class="sy0">:</span> <span class="st0">'daringfireball.net/index.xml'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="st0">'wiredtech'</span><span class="sy0">:</span> <span class="br0">&#123;</span>
            id<span class="sy0">:</span> <span class="st0">'wiredtech'</span><span class="sy0">,</span>
            title<span class="sy0">:</span> <span class="st0">'Wire: Tech Biz'</span><span class="sy0">,</span>
            url<span class="sy0">:</span> <span class="st0">'www.wired.com/rss/techbiz.xml'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="st0">'techcrunch'</span><span class="sy0">:</span> <span class="br0">&#123;</span>
            id<span class="sy0">:</span> <span class="st0">'techcrunch'</span><span class="sy0">,</span>
            title<span class="sy0">:</span> <span class="st0">'TechCrunch'</span><span class="sy0">,</span>
            url<span class="sy0">:</span> <span class="st0">'feedproxy.google.com/Techcrunch'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="st0">'smashing'</span><span class="sy0">:</span> <span class="br0">&#123;</span>
            id<span class="sy0">:</span> <span class="st0">'smashing'</span><span class="sy0">,</span>
            title<span class="sy0">:</span> <span class="st0">'Smashing Magazine'</span><span class="sy0">,</span>
            url<span class="sy0">:</span> <span class="st0">'www.smashingmagazine.com/wp-rss.php'</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Setup the config for IO to use flash</span>
	Y.<span class="me1">io</span>.<span class="me1">transport</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
		id<span class="sy0">:</span> <span class="st0">'flash'</span><span class="sy0">,</span>
		yid<span class="sy0">:</span> Y.<span class="me1">id</span><span class="sy0">,</span>
		src<span class="sy0">:</span> buildDir <span class="sy0">+</span> <span class="st0">'io/io.swf?stamp='</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="kw2">new</span> Date<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>.<span class="me1">getTime</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Simple method for stopping event propagation</span>
    <span class="co1">//Using this so we can detach it later</span>
    <span class="kw2">var</span> stopper <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        e.<span class="me1">stopPropagation</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Get the order, placement and minned state of the modules and save them to a cookie</span>
    <span class="kw2">var</span> _setCookies <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> dds <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>._drags<span class="sy0">;</span>
        <span class="kw2">var</span> list <span class="sy0">=</span> <span class="br0">&#123;</span><span class="br0">&#125;</span><span class="sy0">;</span>
        <span class="co1">//Walk all the drag elements</span>
        Y.<span class="me1">each</span><span class="br0">&#40;</span>dds<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw2">var</span> par <span class="sy0">=</span> v.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="co1">//Find all the lists with drag items in them</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span>par.<span class="me1">test</span><span class="br0">&#40;</span><span class="st0">'ul.list'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>list<span class="br0">&#91;</span>par.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span><span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    list<span class="br0">&#91;</span>par.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span><span class="br0">&#93;</span> <span class="sy0">=</span> <span class="br0">&#91;</span><span class="br0">&#93;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Walk the list</span>
        Y.<span class="me1">each</span><span class="br0">&#40;</span>list<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="co1">//Get all the li's in the list</span>
            <span class="kw2">var</span> lis <span class="sy0">=</span> Y.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> k <span class="sy0">+</span> <span class="st0">' li.item'</span><span class="br0">&#41;</span><span class="sy0">;</span>
            lis.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v2<span class="sy0">,</span> k2<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                <span class="co1">//Get the drag instance for the list item</span>
                <span class="kw2">var</span> dd <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> v2.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="co1">//Get the mod node</span>
                <span class="kw2">var</span> mod <span class="sy0">=</span> dd.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="co1">//Is it minimized</span>
                <span class="kw2">var</span> min <span class="sy0">=</span> <span class="br0">&#40;</span>mod.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="sy0">?</span> <span class="kw2">true</span> <span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">;</span>
                <span class="co1">//Setup the cookie data</span>
                list<span class="br0">&#91;</span>k<span class="br0">&#93;</span><span class="br0">&#91;</span>list<span class="br0">&#91;</span>k<span class="br0">&#93;</span>.<span class="me1">length</span><span class="br0">&#93;</span> <span class="sy0">=</span> <span class="br0">&#123;</span> id<span class="sy0">:</span> dd.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span>.<span class="me1">id</span><span class="sy0">,</span> min<span class="sy0">:</span> min <span class="br0">&#125;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//JSON encode the cookie data</span>
        <span class="kw2">var</span> cookie <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">stringify</span><span class="br0">&#40;</span>list<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Set the sub-cookie</span>
        Y.<span class="me1">Cookie</span>.<span class="me1">setSub</span><span class="br0">&#40;</span><span class="st0">'yui'</span><span class="sy0">,</span> <span class="st0">'portal'</span><span class="sy0">,</span> cookie<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Helper method for creating the feed DD on the left</span>
    <span class="kw2">var</span> _createFeedDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>node<span class="sy0">,</span> data<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">//Create the DD instance</span>
        <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
            node<span class="sy0">:</span> node<span class="sy0">,</span>
            data<span class="sy0">:</span> data<span class="sy0">,</span>
            bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDProxy</span><span class="sy0">,</span> <span class="br0">&#123;</span>
            moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span>
            borderStyle<span class="sy0">:</span> <span class="st0">'none'</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Setup some stopper events</span>
        dd.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> _handleStart<span class="br0">&#41;</span><span class="sy0">;</span>
        dd.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="sy0">,</span> stopper<span class="br0">&#41;</span><span class="sy0">;</span>
        dd.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> stopper<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Handle the node:click event</span>
    <span class="co2">/* {{{ */</span>
    <span class="kw2">var</span> _nodeClick <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">//Is the target an href?</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">target</span>.<span class="me1">test</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw2">var</span> a <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">,</span> anim <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">,</span> div <span class="sy0">=</span> a.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="co1">//Did they click on the min button</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span>a.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'min'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                <span class="co1">//Get some node references</span>
                <span class="kw2">var</span> ul <span class="sy0">=</span> div.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'ul'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                    h2 <span class="sy0">=</span> div.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'h2'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                h <span class="sy0">=</span> h2.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'offsetHeight'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                hUL <span class="sy0">=</span> ul.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'offsetHeight'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                inner <span class="sy0">=</span> div.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.inner'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
                <span class="co1">//Create an anim instance on this node.</span>
                anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
                    node<span class="sy0">:</span> inner
                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="co1">//Is it expanded?</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>div.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    <span class="co1">//Set the vars for collapsing it</span>
                    anim.<span class="me1">setAttrs</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
                        to<span class="sy0">:</span> <span class="br0">&#123;</span>
                            height<span class="sy0">:</span> <span class="nu0">0</span>
                        <span class="br0">&#125;</span><span class="sy0">,</span>
                        duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
                        easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span>
                        iteration<span class="sy0">:</span> <span class="nu0">1</span>
                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="co1">//On the end, toggle the minned class</span>
                    <span class="co1">//Then set the cookies for state</span>
                    anim.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                        div.<span class="me1">toggleClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                        _setCookies<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
                    <span class="co1">//Set the vars for expanding it</span>
                    anim.<span class="me1">setAttrs</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
                        to<span class="sy0">:</span> <span class="br0">&#123;</span>
                            height<span class="sy0">:</span> <span class="br0">&#40;</span>hUL<span class="br0">&#41;</span>
                        <span class="br0">&#125;</span><span class="sy0">,</span>
                        duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
                        easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span><span class="sy0">,</span>
                        iteration<span class="sy0">:</span> <span class="nu0">1</span>
                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="co1">//Toggle the minned class</span>
                    <span class="co1">//Then set the cookies for state</span>
                    div.<span class="me1">toggleClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    _setCookies<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
                <span class="co1">//Run the animation</span>
                anim.<span class="me1">run</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
            <span class="br0">&#125;</span>
            <span class="co1">//Was close clicked?</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span>a.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'close'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                <span class="co1">//Get some Node references..</span>
                <span class="kw2">var</span> li <span class="sy0">=</span> div.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                    id <span class="sy0">=</span> li.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                    dd <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> id<span class="br0">&#41;</span><span class="sy0">,</span>
                    data <span class="sy0">=</span> dd.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                    <span class="kw1">item</span> <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> data.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
                <span class="co1">//Destroy the DD instance.</span>
                dd.<span class="me1">destroy</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="co1">//Setup the animation for making it disappear</span>
                anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
                    node<span class="sy0">:</span> div<span class="sy0">,</span>
                    to<span class="sy0">:</span> <span class="br0">&#123;</span>
                        opacity<span class="sy0">:</span> <span class="nu0">0</span>
                    <span class="br0">&#125;</span><span class="sy0">,</span>
                    duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
                    easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span>
                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                anim.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    <span class="co1">//On end of the first anim, setup another to make it collapse</span>
                    <span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
                        node<span class="sy0">:</span> div<span class="sy0">,</span>
                        to<span class="sy0">:</span> <span class="br0">&#123;</span>
                            height<span class="sy0">:</span> <span class="nu0">0</span>
                        <span class="br0">&#125;</span><span class="sy0">,</span>
                        duration<span class="sy0">:</span> <span class="st0">'.25'</span><span class="sy0">,</span>
                        easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span>
                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    anim.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                        <span class="co1">//Remove it from the document</span>
                        li.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">removeChild</span><span class="br0">&#40;</span>li<span class="br0">&#41;</span><span class="sy0">;</span>
                        <span class="kw1">item</span>.<span class="me1">removeClass</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                        <span class="co1">//Setup a drag instance on the feed list</span>
                        _createFeedDD<span class="br0">&#40;</span><span class="kw1">item</span><span class="sy0">,</span> data<span class="br0">&#41;</span><span class="sy0">;</span>
                        _setCookies<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="co1">//Run the animation</span>
                    anim.<span class="me1">run</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="co1">//Run the animation</span>
                anim.<span class="me1">run</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
            <span class="co1">//Stop the click</span>
            e.<span class="me1">halt</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
    <span class="co2">/* }}} */</span>
&nbsp;
    <span class="co1">//This creates the module, either from a drag event or from the cookie load</span>
    <span class="kw2">var</span> setupModDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>mod<span class="sy0">,</span> data<span class="sy0">,</span> dd<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> node <span class="sy0">=</span> mod<span class="sy0">;</span>
        <span class="co1">//Listen for the click so we can react to the buttons</span>
        node.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'h2'</span><span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> _nodeClick<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">//Remove the event's on the original drag instance</span>
        dd.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        dd.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        dd.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">//It's a target</span>
        dd.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'target'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Setup the handles</span>
        dd.<span class="me1">addHandle</span><span class="br0">&#40;</span><span class="st0">'h2'</span><span class="br0">&#41;</span>.<span class="me1">addInvalid</span><span class="br0">&#40;</span><span class="st0">'a'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Remove the mouse listeners on this node</span>
        dd._unprep<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Update a new node</span>
        dd.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Reset the mouse handlers</span>
        dd._prep<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">//The Yahoo! Pipes URL</span>
        <span class="kw2">var</span> url <span class="sy0">=</span> <span class="st0">'http:/'</span><span class="sy0">+</span><span class="st0">'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&amp;_render=json&amp;url=http:/'</span><span class="sy0">+</span><span class="st0">'/'</span> <span class="sy0">+</span> data.<span class="me1">url</span><span class="sy0">;</span>
        <span class="co1">//Start the XDR request</span>
        <span class="kw2">var</span> id <span class="sy0">=</span> Y.<span class="me1">io</span><span class="br0">&#40;</span>url<span class="sy0">,</span> <span class="br0">&#123;</span>
            method<span class="sy0">:</span> <span class="st0">'GET'</span><span class="sy0">,</span>
            xdr<span class="sy0">:</span> <span class="br0">&#123;</span> 
			    <span class="kw2">use</span><span class="sy0">:</span><span class="st0">'flash'</span>
		    <span class="br0">&#125;</span><span class="sy0">,</span>
            <span class="co1">//XDR Listeners</span>
		    on<span class="sy0">:</span> <span class="br0">&#123;</span> 
			    success<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>id<span class="sy0">,</span> data<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    <span class="co1">//On success get the feed data</span>
                    <span class="kw2">var</span> d <span class="sy0">=</span> feeds<span class="br0">&#91;</span>trans<span class="br0">&#91;</span>id<span class="br0">&#93;</span><span class="br0">&#93;</span><span class="sy0">,</span>
                    <span class="co1">//Node reference</span>
                    inner <span class="sy0">=</span> d.<span class="me1">mod</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.inner'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                    <span class="co1">//Parse the JSON data</span>
                    oRSS <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">&#40;</span>data.<span class="me1">responseText</span><span class="br0">&#41;</span><span class="sy0">,</span>
                    html <span class="sy0">=</span> <span class="st0">''</span><span class="sy0">;</span>
&nbsp;
                    <span class="co1">//Did we get data?</span>
		            <span class="kw1">if</span> <span class="br0">&#40;</span>oRSS <span class="sy0">&amp;&amp;</span> oRSS.<span class="me1">count</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                        <span class="co1">//Walk the list and create the news list</span>
			            Y.<span class="me1">each</span><span class="br0">&#40;</span>oRSS.<span class="me1">value</span>.<span class="me1">items</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                            <span class="kw1">if</span> <span class="br0">&#40;</span>k <span class="sy0">&lt;</span> <span class="nu0">5</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                                html <span class="sy0">+=</span> <span class="st0">'&lt;li&gt;&lt;a href=&quot;'</span> <span class="sy0">+</span> v.<span class="me1">link</span> <span class="sy0">+</span> <span class="st0">'&quot; target=&quot;_blank&quot;&gt;'</span> <span class="sy0">+</span> v.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'&lt;/a&gt;'</span><span class="sy0">;</span>
                            <span class="br0">&#125;</span>
                        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
		            <span class="br0">&#125;</span>
                    <span class="co1">//Set the innerHTML of the module</span>
                    inner.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'&lt;ul&gt;'</span> <span class="sy0">+</span> html <span class="sy0">+</span> <span class="st0">'&lt;/ul&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="kw1">if</span> <span class="br0">&#40;</span>Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                        <span class="co1">//If we are still dragging, update the proxy element too..</span>
                        <span class="kw2">var</span> proxy_inner <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">activeDrag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.inner'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                        proxy_inner.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'&lt;ul&gt;'</span> <span class="sy0">+</span> html <span class="sy0">+</span> <span class="st0">'&lt;/ul&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
                    <span class="br0">&#125;</span>
                <span class="br0">&#125;</span><span class="sy0">,</span>
			    failure<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>id<span class="sy0">,</span> data<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    <span class="co1">//Something failed..</span>
                    <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">'Feed failed to load..'</span> <span class="sy0">+</span> id <span class="sy0">+</span> <span class="st0">' :: '</span> <span class="sy0">+</span> data<span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
		    <span class="br0">&#125;</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Keep track of the transaction</span>
        feeds<span class="br0">&#91;</span>data.<span class="me1">id</span><span class="br0">&#93;</span>.<span class="me1">trans</span> <span class="sy0">=</span> id<span class="sy0">;</span>
        feeds<span class="br0">&#91;</span>data.<span class="me1">id</span><span class="br0">&#93;</span>.<span class="me1">mod</span> <span class="sy0">=</span> mod<span class="sy0">;</span>
        trans<span class="br0">&#91;</span>id.<span class="me1">id</span><span class="br0">&#93;</span> <span class="sy0">=</span> data.<span class="me1">id</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
&nbsp;
    <span class="co1">//Helper method to create the markup for the module..</span>
    <span class="kw2">var</span> createMod <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>feed<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> str <span class="sy0">=</span> <span class="st0">'&lt;li class=&quot;item&quot;&gt;'</span> <span class="sy0">+</span>
                    <span class="st0">'&lt;div class=&quot;mod&quot;&gt;'</span> <span class="sy0">+</span> 
                        <span class="st0">'&lt;h2&gt;&lt;strong&gt;'</span> <span class="sy0">+</span> feed.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'&lt;/strong&gt; &lt;a title=&quot;minimize module&quot; class=&quot;min&quot; href=&quot;#&quot;&gt; &lt;/a&gt;'</span> <span class="sy0">+</span>
                        <span class="st0">'&lt;a title=&quot;close module&quot; class=&quot;close&quot; href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/h2&gt;'</span> <span class="sy0">+</span>
                        <span class="st0">'&lt;div class=&quot;inner&quot;&gt;'</span> <span class="sy0">+</span>
                        <span class="st0">'    &lt;div class=&quot;loading&quot;&gt;Feed loading, please wait..&lt;/div&gt;'</span> <span class="sy0">+</span> 
                        <span class="st0">'&lt;/div&gt;'</span> <span class="sy0">+</span>
                    <span class="st0">'&lt;/div&gt;'</span> <span class="sy0">+</span>
                <span class="st0">'&lt;/li&gt;'</span><span class="sy0">;</span>
        <span class="kw1">return</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">&#40;</span>str<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Handle the start Drag event on the left side</span>
    <span class="kw2">var</span> _handleStart <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">//Stop the event</span>
        stopper<span class="br0">&#40;</span>e<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Some private vars</span>
        <span class="kw2">var</span> drag <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">,</span>
            list3 <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#list1'</span><span class="br0">&#41;</span><span class="sy0">,</span>
            mod <span class="sy0">=</span> createMod<span class="br0">&#40;</span>drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">//Add it to the first list</span>
        list3.<span class="me1">appendChild</span><span class="br0">&#40;</span>mod<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Set the item on the left column disabled.</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Set the node on the instance</span>
        drag.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Add some styles to the proxy node.</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
            opacity<span class="sy0">:</span> <span class="st0">'.5'</span><span class="sy0">,</span>
            borderStyle<span class="sy0">:</span> <span class="st0">'none'</span><span class="sy0">,</span>
            width<span class="sy0">:</span> <span class="st0">'320px'</span><span class="sy0">,</span>
            height<span class="sy0">:</span> <span class="st0">'61px'</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Update the innerHTML of the proxy with the innerHTML of the module</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//set the inner module to hidden</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">'hidden'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//add a class for styling</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'moving'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Setup the DD instance</span>
        setupModDD<span class="br0">&#40;</span>mod<span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="sy0">,</span> drag<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">//Remove the listener</span>
        <span class="kw1">this</span>.<span class="me1">detach</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> _handleStart<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Walk through the feeds list and create the list on the left</span>
    <span class="kw2">var</span> feedList <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#feeds ul'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    Y.<span class="me1">each</span><span class="br0">&#40;</span>feeds<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> li <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">&#40;</span><span class="st0">'&lt;li id=&quot;'</span> <span class="sy0">+</span> k <span class="sy0">+</span> <span class="st0">'&quot;&gt;'</span> <span class="sy0">+</span> v.<span class="me1">title</span> <span class="sy0">+</span> <span class="st0">'&lt;/li&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        feedList.<span class="me1">appendChild</span><span class="br0">&#40;</span>li<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Create the DD instance for this item</span>
        _createFeedDD<span class="br0">&#40;</span>li<span class="sy0">,</span> v<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//This does the calculations for when and where to move a module</span>
    <span class="kw2">var</span> _moveMod <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>drag<span class="sy0">,</span> drop<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'item'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw2">var</span> dragNode <span class="sy0">=</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                dropNode <span class="sy0">=</span> drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span>
                append <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
                padding <span class="sy0">=</span> <span class="nu0">30</span><span class="sy0">,</span>
                xy <span class="sy0">=</span> drag.<span class="me1">mouseXY</span><span class="sy0">,</span>
                region <span class="sy0">=</span> drop.<span class="me1">region</span><span class="sy0">,</span>
                middle1 <span class="sy0">=</span> region.<span class="me1">top</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>region.<span class="me1">bottom</span> <span class="sy0">-</span> region.<span class="me1">top</span><span class="br0">&#41;</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span><span class="sy0">,</span>
                middle2 <span class="sy0">=</span> region.<span class="me1">left</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>region.<span class="me1">right</span> <span class="sy0">-</span> region.<span class="me1">left</span><span class="br0">&#41;</span> <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span><span class="sy0">,</span>
                dir <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
                dir1 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span>
                dir2 <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
&nbsp;
                <span class="co1">//We could do something a little more fancy here, but we won't ;)</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>xy<span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span> <span class="sy0">&lt;</span> <span class="br0">&#40;</span>region.<span class="me1">top</span> <span class="sy0">+</span> padding<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    dir1 <span class="sy0">=</span> <span class="st0">'top'</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>region.<span class="me1">bottom</span> <span class="sy0">-</span> padding<span class="br0">&#41;</span> <span class="sy0">&lt;</span> xy<span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    dir1 <span class="sy0">=</span> <span class="st0">'bottom'</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>region.<span class="me1">right</span> <span class="sy0">-</span> padding<span class="br0">&#41;</span> <span class="sy0">&lt;</span> xy<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    dir2 <span class="sy0">=</span> <span class="st0">'right'</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>xy<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span> <span class="sy0">&lt;</span> <span class="br0">&#40;</span>region.<span class="me1">left</span> <span class="sy0">+</span> padding<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    dir2 <span class="sy0">=</span> <span class="st0">'left'</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
                dir <span class="sy0">=</span> dir2<span class="sy0">;</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span>dir2 <span class="sy0">===</span> <span class="kw2">false</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    dir <span class="sy0">=</span> dir1<span class="sy0">;</span>
                <span class="br0">&#125;</span>
                <span class="kw1">switch</span> <span class="br0">&#40;</span>dir<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    <span class="kw1">case</span> <span class="st0">'top'</span><span class="sy0">:</span>
                        <span class="kw2">var</span> next <span class="sy0">=</span> dropNode.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'nextSibling'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                        <span class="kw1">if</span> <span class="br0">&#40;</span>next<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                            dropNode <span class="sy0">=</span> next<span class="sy0">;</span>
                        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
                            append <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
                        <span class="br0">&#125;</span>
                        <span class="kw1">break</span><span class="sy0">;</span>
                    <span class="kw1">case</span> <span class="st0">'bottom'</span><span class="sy0">:</span>
                        <span class="kw1">break</span><span class="sy0">;</span>
                    <span class="kw1">case</span> <span class="st0">'right'</span><span class="sy0">:</span>
                    <span class="kw1">case</span> <span class="st0">'left'</span><span class="sy0">:</span>
                        <span class="kw1">break</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
&nbsp;
&nbsp;
            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>dropNode <span class="sy0">!==</span> <span class="kw2">null</span><span class="br0">&#41;</span> <span class="sy0">&amp;&amp;</span> dir<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span>dropNode <span class="sy0">&amp;&amp;</span> dropNode.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>append<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                        dropNode.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">insertBefore</span><span class="br0">&#40;</span>dragNode<span class="sy0">,</span> dropNode<span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
                        dropNode.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">appendChild</span><span class="br0">&#40;</span>dragNode<span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="br0">&#125;</span>
                <span class="br0">&#125;</span>
            <span class="br0">&#125;</span>
            <span class="co1">//Resync all the targets because something moved..</span>
            Y.<span class="me1">Lang</span>.<span class="me1">later</span><span class="br0">&#40;</span><span class="nu0">50</span><span class="sy0">,</span> Y<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">syncActiveShims</span><span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="coMULTI">/*
    Handle the drop:enter event
    Now when we get a drop enter event, we check to see if the target is an LI, then we know it's out module.
    Here is where we move the module around in the DOM.    
    */</span>
    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drop:enter'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>e.<span class="me1">drag</span> <span class="sy0">||</span> <span class="sy0">!</span>e.<span class="me1">drop</span> <span class="sy0">||</span> <span class="br0">&#40;</span>e.<span class="me1">drop</span> <span class="sy0">!==</span> e.<span class="me1">target</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">return</span> <span class="kw2">false</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">===</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">hasClass</span><span class="br0">&#40;</span><span class="st0">'item'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                _moveMod<span class="br0">&#40;</span>e.<span class="me1">drag</span><span class="sy0">,</span> e.<span class="me1">drop</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Handle the drag:drag event</span>
    <span class="co1">//On drag we need to know if they are moved up or down so we can place the module in the proper DOM location.</span>
    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drag'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> y <span class="sy0">=</span> e.<span class="me1">target</span>.<span class="me1">mouseXY</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="sy0">;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>y <span class="sy0">&lt;</span> lastY<span class="br0">&#41;</span> <span class="br0">&#123;</span>
            goingUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
            goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
        lastY <span class="sy0">=</span> y<span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="coMULTI">/*
    Handle the drop:hit event
    Now that we have a drop on the target, we check to see if the drop was not on a LI.
    This means they dropped on the empty space of the UL.
    */</span>
    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span>
            drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                drop.<span class="me1">appendChild</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Handle the drag:start event</span>
    <span class="co1">//Use some CSS here to make our dragging better looking.</span>
    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>drag.<span class="me1">target</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            drag.<span class="me1">target</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'locked'</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'opacity'</span><span class="sy0">,</span><span class="st0">'.5'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">'hidden'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'moving'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Handle the drag:end event</span>
    <span class="co1">//Replace some of the styles we changed on start drag.</span>
    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>drag.<span class="me1">target</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            drag.<span class="me1">target</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'locked'</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'visibility'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">removeClass</span><span class="br0">&#40;</span><span class="st0">'moving'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span>
        _setCookies<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
&nbsp;
    <span class="co1">//Handle going over a UL, for empty lists</span>
    Y.<span class="me1">Portal</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drop:over'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span>
            drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                drop.<span class="me1">appendChild</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="sy0">;</span>
                Y.<span class="me1">Lang</span>.<span class="me1">later</span><span class="br0">&#40;</span><span class="nu0">50</span><span class="sy0">,</span> Y<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">syncActiveShims</span><span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Create simple targets for the main lists..</span>
    <span class="kw2">var</span> uls <span class="sy0">=</span> Y.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul.list'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    uls.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> tar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drop</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
            node<span class="sy0">:</span> v<span class="sy0">,</span>
            padding<span class="sy0">:</span> <span class="st0">'20 0'</span><span class="sy0">,</span>
            bubbles<span class="sy0">:</span> Y.<span class="me1">Portal</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
&nbsp;
    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'io:xdrReady'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">//Get the cookie data</span>
        <span class="kw2">var</span> cookie <span class="sy0">=</span> Y.<span class="me1">Cookie</span>.<span class="me1">getSub</span><span class="br0">&#40;</span><span class="st0">'yui'</span><span class="sy0">,</span> <span class="st0">'portal'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>cookie<span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="co1">//JSON parse the stored data</span>
            <span class="kw2">var</span> obj <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">&#40;</span>cookie<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
            <span class="co1">//Walk the data</span>
            Y.<span class="me1">each</span><span class="br0">&#40;</span>obj<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                <span class="co1">//Get the node for the list</span>
                <span class="kw2">var</span> list <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> k<span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="co1">//Walk the items in this list</span>
                Y.<span class="me1">each</span><span class="br0">&#40;</span>v<span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v2<span class="sy0">,</span> k2<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    <span class="co1">//Get the drag for it</span>
                    <span class="kw2">var</span> drag <span class="sy0">=</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">getDrag</span><span class="br0">&#40;</span><span class="st0">'#'</span> <span class="sy0">+</span> v2.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="co1">//Create the module</span>
                    <span class="kw2">var</span> mod <span class="sy0">=</span> createMod<span class="br0">&#40;</span>drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="kw1">if</span> <span class="br0">&#40;</span>v2.<span class="me1">min</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                        <span class="co1">//If it's minned add some CSS</span>
                        mod.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.mod'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'minned'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                        mod.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'div.inner'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'height'</span><span class="sy0">,</span> <span class="st0">'0px'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="br0">&#125;</span>
                    <span class="co1">//Add it to the list</span>
                    list.<span class="me1">appendChild</span><span class="br0">&#40;</span>mod<span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="co1">//Set the drag listeners</span>
                    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'disabled'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    drag.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="sy0">,</span> mod<span class="br0">&#41;</span><span class="sy0">;</span>
                    drag.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="sy0">,</span> Y.<span class="me1">DD</span>.<span class="me1">DDM</span>._proxy<span class="br0">&#41;</span><span class="sy0">;</span>
                    drag.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    drag.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    drag.<span class="me1">detachAll</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    drag._unprep<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                    <span class="co1">//Setup the new Drag listeners</span>
                    setupModDD<span class="br0">&#40;</span>mod<span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'data'</span><span class="br0">&#41;</span><span class="sy0">,</span> drag<span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-e22fdfada23946f27257feb6e8254515-plain">//Use loader to grab the modules needed
YUI(yuiConfig).use('dd', 'anim', 'io', 'cookie', 'json', function(Y) {
    //Make this an Event Target so we can bubble to it
    var Portal = function() {
        Portal.superclass.constructor.apply(this, arguments);
    };
    Portal.NAME = 'portal';
    Y.extend(Portal, Y.Base);
    //This is our new bubble target..
    Y.Portal = new Portal();


    //Setup some private variables..
    var goingUp = false, lastY = 0, trans = {};

    //The list of feeds that we are going to use
    var feeds = {
        'ynews': {
            id: 'ynews',
            title: 'Yahoo! US News',
            url: 'rss.news.yahoo.com/rss/us'
        },
        'yui': {
            id: 'yui',
            title: 'YUI Blog',
            url: 'feeds.yuiblog.com/YahooUserInterfaceBlog'
        },
        'slashdot': {
            id: 'slashdot',
            title: 'Slashdot',
            url: 'rss.slashdot.org/Slashdot/slashdot'
        },
        'ajaxian': {
            id: 'ajaxian',
            title: 'Ajaxian',
            url: 'feeds.feedburner.com/ajaxian'
        },
        'daringfireball': {
            id: 'daringfireball',
            title: 'Daring Fireball',
            url: 'daringfireball.net/index.xml'
        },
        'wiredtech': {
            id: 'wiredtech',
            title: 'Wire: Tech Biz',
            url: 'www.wired.com/rss/techbiz.xml'
        },
        'techcrunch': {
            id: 'techcrunch',
            title: 'TechCrunch',
            url: 'feedproxy.google.com/Techcrunch'
        },
        'smashing': {
            id: 'smashing',
            title: 'Smashing Magazine',
            url: 'www.smashingmagazine.com/wp-rss.php'
        }
    };

    //Setup the config for IO to use flash
	Y.io.transport({
		id: 'flash',
		yid: Y.id,
		src: buildDir + 'io/io.swf?stamp=' + (new Date()).getTime()
    });
    
    //Simple method for stopping event propagation
    //Using this so we can detach it later
    var stopper = function(e) {
        e.stopPropagation();
    };

    //Get the order, placement and minned state of the modules and save them to a cookie
    var _setCookies = function() {
        var dds = Y.DD.DDM._drags;
        var list = {};
        //Walk all the drag elements
        Y.each(dds, function(v, k) {
            var par = v.get('node').get('parentNode');
            //Find all the lists with drag items in them
            if (par.test('ul.list')) {
                if (!list[par.get('id')]) {
                    list[par.get('id')] = [];
                }
            }
        });
        //Walk the list
        Y.each(list, function(v, k) {
            //Get all the li's in the list
            var lis = Y.all('#' + k + ' li.item');
            lis.each(function(v2, k2) {
                //Get the drag instance for the list item
                var dd = Y.DD.DDM.getDrag('#' + v2.get('id'));
                //Get the mod node
                var mod = dd.get('node').one('div.mod');
                //Is it minimized
                var min = (mod.hasClass('minned')) ? true : false;
                //Setup the cookie data
                list[k][list[k].length] = { id: dd.get('data').id, min: min };
            });
        });
        //JSON encode the cookie data
        var cookie = Y.JSON.stringify(list);
        //Set the sub-cookie
        Y.Cookie.setSub('yui', 'portal', cookie);
    };

    //Helper method for creating the feed DD on the left
    var _createFeedDD = function(node, data) {
        //Create the DD instance
        var dd = new Y.DD.Drag({
            node: node,
            data: data,
            bubbles: Y.Portal
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false,
            borderStyle: 'none'
        });
        //Setup some stopper events
        dd.on('drag:start', _handleStart);
        dd.on('drag:end', stopper);
        dd.on('drag:drophit', stopper);
    };

    //Handle the node:click event
    /* {{{ */
    var _nodeClick = function(e) {
        //Is the target an href?
        if (e.target.test('a')) {
            var a = e.target, anim = null, div = a.get('parentNode').get('parentNode');
            //Did they click on the min button
            if (a.hasClass('min')) {
                //Get some node references
                var ul = div.one('ul'),
                    h2 = div.one('h2'),
                h = h2.get('offsetHeight'),
                hUL = ul.get('offsetHeight'),
                inner = div.one('div.inner');
                
                //Create an anim instance on this node.
                anim = new Y.Anim({
                    node: inner
                });
                //Is it expanded?
                if (!div.hasClass('minned')) {
                    //Set the vars for collapsing it
                    anim.setAttrs({
                        to: {
                            height: 0
                        },
                        duration: '.25',
                        easing: Y.Easing.easeOut,
                        iteration: 1
                    });
                    //On the end, toggle the minned class
                    //Then set the cookies for state
                    anim.on('end', function() {
                        div.toggleClass('minned');
                        _setCookies();
                    });
                } else {
                    //Set the vars for expanding it
                    anim.setAttrs({
                        to: {
                            height: (hUL)
                        },
                        duration: '.25',
                        easing: Y.Easing.easeOut,
                        iteration: 1
                    });
                    //Toggle the minned class
                    //Then set the cookies for state
                    div.toggleClass('minned');
                    _setCookies();
                }
                //Run the animation
                anim.run();

            }
            //Was close clicked?
            if (a.hasClass('close')) {
                //Get some Node references..
                var li = div.get('parentNode'),
                    id = li.get('id'),
                    dd = Y.DD.DDM.getDrag('#' + id),
                    data = dd.get('data'),
                    item = Y.one('#' + data.id);

                //Destroy the DD instance.
                dd.destroy();
                //Setup the animation for making it disappear
                anim = new Y.Anim({
                    node: div,
                    to: {
                        opacity: 0
                    },
                    duration: '.25',
                    easing: Y.Easing.easeOut
                });
                anim.on('end', function() {
                    //On end of the first anim, setup another to make it collapse
                    var anim = new Y.Anim({
                        node: div,
                        to: {
                            height: 0
                        },
                        duration: '.25',
                        easing: Y.Easing.easeOut
                    });
                    anim.on('end', function() {
                        //Remove it from the document
                        li.get('parentNode').removeChild(li);
                        item.removeClass('disabled');
                        //Setup a drag instance on the feed list
                        _createFeedDD(item, data);
                        _setCookies();

                    });
                    //Run the animation
                    anim.run();
                });
                //Run the animation
                anim.run();
            }
            //Stop the click
            e.halt();
        }
    };
    /* }}} */
    
    //This creates the module, either from a drag event or from the cookie load
    var setupModDD = function(mod, data, dd) {
        var node = mod;
        //Listen for the click so we can react to the buttons
        node.one('h2').on('click', _nodeClick);
        
        //Remove the event's on the original drag instance
        dd.detachAll('drag:start');
        dd.detachAll('drag:end');
        dd.detachAll('drag:drophit');
        
        //It's a target
        dd.set('target', true);
        //Setup the handles
        dd.addHandle('h2').addInvalid('a');
        //Remove the mouse listeners on this node
        dd._unprep();
        //Update a new node
        dd.set('node', mod);
        //Reset the mouse handlers
        dd._prep();

        //The Yahoo! Pipes URL
        var url = 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/' + data.url;
        //Start the XDR request
        var id = Y.io(url, {
            method: 'GET',
            xdr: { 
			    use:'flash'
		    },
            //XDR Listeners
		    on: { 
			    success: function(id, data) {
                    //On success get the feed data
                    var d = feeds[trans[id]],
                    //Node reference
                    inner = d.mod.one('div.inner'),
                    //Parse the JSON data
                    oRSS = Y.JSON.parse(data.responseText),
                    html = '';
                    
                    //Did we get data?
		            if (oRSS && oRSS.count) {
                        //Walk the list and create the news list
			            Y.each(oRSS.value.items, function(v, k) {
                            if (k < 5) {
                                html += '<li><a href="' + v.link + '" target="_blank">' + v.title + '</a>';
                            }
                        });
		            }
                    //Set the innerHTML of the module
                    inner.set('innerHTML', '<ul>' + html + '</ul>');
                    if (Y.DD.DDM.activeDrag) {
                        //If we are still dragging, update the proxy element too..
                        var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').one('div.inner');
                        proxy_inner.set('innerHTML', '<ul>' + html + '</ul>');
                        
                    }
                },
			    failure: function(id, data) {
                    //Something failed..
                    alert('Feed failed to load..' + id + ' :: ' + data);
                }
		    }
        });
        //Keep track of the transaction
        feeds[data.id].trans = id;
        feeds[data.id].mod = mod;
        trans[id.id] = data.id;
    };
    

    //Helper method to create the markup for the module..
    var createMod = function(feed) {
        var str = '<li class="item">' +
                    '<div class="mod">' + 
                        '<h2><strong>' + feed.title + '</strong> <a title="minimize module" class="min" href="#"> </a>' +
                        '<a title="close module" class="close" href="#"></a></h2>' +
                        '<div class="inner">' +
                        '    <div class="loading">Feed loading, please wait..</div>' + 
                        '</div>' +
                    '</div>' +
                '</li>';
        return Y.Node.create(str);
    };
    
    //Handle the start Drag event on the left side
    var _handleStart = function(e) {
        //Stop the event
        stopper(e);
        //Some private vars
        var drag = this,
            list3 = Y.one('#list1'),
            mod = createMod(drag.get('data'));
        
        //Add it to the first list
        list3.appendChild(mod);
        //Set the item on the left column disabled.
        drag.get('node').addClass('disabled');
        //Set the node on the instance
        drag.set('node', mod);
        //Add some styles to the proxy node.
        drag.get('dragNode').setStyles({
            opacity: '.5',
            borderStyle: 'none',
            width: '320px',
            height: '61px'
        });
        //Update the innerHTML of the proxy with the innerHTML of the module
        drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
        //set the inner module to hidden
        drag.get('node').one('div.mod').setStyle('visibility', 'hidden');
        //add a class for styling
        drag.get('node').addClass('moving');
        //Setup the DD instance
        setupModDD(mod, drag.get('data'), drag);

        //Remove the listener
        this.detach('drag:start', _handleStart);
    };
    
    //Walk through the feeds list and create the list on the left
    var feedList = Y.one('#feeds ul');
    Y.each(feeds, function(v, k) {
        var li = Y.Node.create('<li id="' + k + '">' + v.title + '</li>');
        feedList.appendChild(li);
        //Create the DD instance for this item
        _createFeedDD(li, v);
    });

    //This does the calculations for when and where to move a module
    var _moveMod = function(drag, drop) {
        if (drag.get('node').hasClass('item')) {
            var dragNode = drag.get('node'),
                dropNode = drop.get('node'),
                append = false,
                padding = 30,
                xy = drag.mouseXY,
                region = drop.region,
                middle1 = region.top + ((region.bottom - region.top) / 2),
                middle2 = region.left + ((region.right - region.left) / 2),
                dir = false,
                dir1 = false,
                dir2 = false;
                
                //We could do something a little more fancy here, but we won't ;)
                if ((xy[1] < (region.top + padding))) {
                    dir1 = 'top';
                }
                if ((region.bottom - padding) < xy[1]) {
                    dir1 = 'bottom';
                }
                if ((region.right - padding) < xy[0]) {
                    dir2 = 'right';
                }
                if ((xy[0] < (region.left + padding))) {
                    dir2 = 'left';
                }
                dir = dir2;
                if (dir2 === false) {
                    dir = dir1;
                }
                switch (dir) {
                    case 'top':
                        var next = dropNode.get('nextSibling');
                        if (next) {
                            dropNode = next;
                        } else {
                            append = true;
                        }
                        break;
                    case 'bottom':
                        break;
                    case 'right':
                    case 'left':
                        break;
                }
            

            if ((dropNode !== null) && dir) {
                if (dropNode && dropNode.get('parentNode')) {
                    if (!append) {
                        dropNode.get('parentNode').insertBefore(dragNode, dropNode);
                    } else {
                        dropNode.get('parentNode').appendChild(dragNode);
                    }
                }
            }
            //Resync all the targets because something moved..
            Y.Lang.later(50, Y, function() {
                Y.DD.DDM.syncActiveShims(true);
            });
        }
    };

    /*
    Handle the drop:enter event
    Now when we get a drop enter event, we check to see if the target is an LI, then we know it's out module.
    Here is where we move the module around in the DOM.    
    */
    Y.Portal.on('drop:enter', function(e) {
        if (!e.drag || !e.drop || (e.drop !== e.target)) {
            return false;
        }
        if (e.drop.get('node').get('tagName').toLowerCase() === 'li') {
            if (e.drop.get('node').hasClass('item')) {
                _moveMod(e.drag, e.drop);
            }
        }
    });

    //Handle the drag:drag event
    //On drag we need to know if they are moved up or down so we can place the module in the proper DOM location.
    Y.Portal.on('drag:drag', function(e) {
        var y = e.target.mouseXY[1];
        if (y < lastY) {
            goingUp = true;
        } else {
            goingUp = false;
        }
        lastY = y;
    });

    /*
    Handle the drop:hit event
    Now that we have a drop on the target, we check to see if the drop was not on a LI.
    This means they dropped on the empty space of the UL.
    */
    Y.Portal.on('drag:drophit', function(e) {
        var drop = e.drop.get('node'),
            drag = e.drag.get('node');

        if (drop.get('tagName').toLowerCase() !== 'li') {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
            }
        }
    });

    //Handle the drag:start event
    //Use some CSS here to make our dragging better looking.
    Y.Portal.on('drag:start', function(e) {
        var drag = e.target;
        if (drag.target) {
            drag.target.set('locked', true);
        }
        drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
        drag.get('dragNode').setStyle('opacity','.5');
        drag.get('node').one('div.mod').setStyle('visibility', 'hidden');
        drag.get('node').addClass('moving');
    });

    //Handle the drag:end event
    //Replace some of the styles we changed on start drag.
    Y.Portal.on('drag:end', function(e) {
        var drag = e.target;
        if (drag.target) {
            drag.target.set('locked', false);
        }
        drag.get('node').setStyle('visibility', '');
        drag.get('node').one('div.mod').setStyle('visibility', '');
        drag.get('node').removeClass('moving');
        drag.get('dragNode').set('innerHTML', '');
        _setCookies();
    });
    

    //Handle going over a UL, for empty lists
    Y.Portal.on('drop:over', function(e) {
        var drop = e.drop.get('node'),
            drag = e.drag.get('node');

        if (drop.get('tagName').toLowerCase() !== 'li') {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
                Y.Lang.later(50, Y, function() {
                    Y.DD.DDM.syncActiveShims(true);
                });
            }
        }
    });

    //Create simple targets for the main lists..
    var uls = Y.all('#play ul.list');
    uls.each(function(v, k) {
        var tar = new Y.DD.Drop({
            node: v,
            padding: '20 0',
            bubbles: Y.Portal
        });
    });
    
    
    Y.on('io:xdrReady', function() {
        //Get the cookie data
        var cookie = Y.Cookie.getSub('yui', 'portal');
        if (cookie) {
            //JSON parse the stored data
            var obj = Y.JSON.parse(cookie);

            //Walk the data
            Y.each(obj, function(v, k) {
                //Get the node for the list
                var list = Y.one('#' + k);
                //Walk the items in this list
                Y.each(v, function(v2, k2) {
                    //Get the drag for it
                    var drag = Y.DD.DDM.getDrag('#' + v2.id);
                    //Create the module
                    var mod = createMod(drag.get('data'));
                    if (v2.min) {
                        //If it's minned add some CSS
                        mod.one('div.mod').addClass('minned');
                        mod.one('div.inner').setStyle('height', '0px');
                    }
                    //Add it to the list
                    list.appendChild(mod);
                    //Set the drag listeners
                    drag.get('node').addClass('disabled');
                    drag.set('node', mod);
                    drag.set('dragNode', Y.DD.DDM._proxy);
                    drag.detachAll('drag:start');
                    drag.detachAll('drag:end');
                    drag.detachAll('drag:drophit');
                    drag._unprep();
                    //Setup the new Drag listeners
                    setupModDD(mod, drag.get('data'), drag);
                });
            });
        }
    });

});</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Drag &amp; Drop Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../dd/simple-drag.html'>Simple Drag</a></li><li><a href='../dd/drag-plugin.html'>Drag Node Plugin</a></li><li><a href='../dd/proxy-drag.html'>Proxy Drag</a></li><li><a href='../dd/constrained-drag.html'>Drag Constrained to a Region</a></li><li><a href='../dd/groups-drag.html'>Interaction Groups</a></li><li><a href='../dd/shim-drag.html'>Using the Drag Shim</a></li><li><a href='../dd/anim-drop.html'>Animated Drop Targets</a></li><li><a href='../dd/drop-code.html'>Drop Based Coding</a></li><li><a href='../dd/winscroll.html'>Window Scrolling</a></li><li><a href='../dd/delegate.html'>Drag Delegation</a></li><li><a href='../dd/delegate-drop.html'>Drag Delegation with a Drop Target</a></li><li><a href='../dd/delegate-plugins.html'>Using Drag Plugins with Delegate</a></li><li><a href='../dd/list-drag.html'>List Reorder w/Bubbling</a></li><li><a href='../dd/scroll-list.html'>List Reorder w/Scrolling</a></li><li class='selected'><a href='../dd/portal-drag.html'>Portal Style Example</a></li><li><a href='../dd/photo-browser.html'>Photo Browser</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a Page Theme on the Fly (included with examples for StyleSheet)</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Drag &amp; Drop Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/dd/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_dd.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
